<template>
	<view class="detail-main" v-if="showlist">
		<view>
			<view class="banner" v-if="title.image.length > 0">
				<image mode="aspectFill" lazy-load="true" :src="title.image[0]" @click="$imgPreview(title.image[0], 0, '', title.image)"></image>
				<view class="city" @click="tocity">
					<text class="position-txt">{{ params.city }}</text>
				</view>
			</view>
			<view class="banner" v-else>
				<text class="iconfont iconmeiyoushuju"></text>
				<view class="f24 c999">暂无更多图片~</view>
			</view>
			<!-- 商品名-->
			<view class="car-des">
				<view class="car-title">
					<view class="mt38">
						<text class="f48">{{ title.name }}</text>
						<!-- <text class="f24 ml18 c999">{{item.value}}</text> -->
					</view>
					<view class="mt28  ">
						<text class="f24">厂商指导价：</text>
						<text class="f34 ce41">{{ title.price_range }}</text>
						<!-- <text class="f24 ce41" v-if="item.price_range!='暂无'">万</text> -->
					</view>
				</view>
				<image :src="`${host}/common/arrow.gif`" mode="aspectFill" class="position-img" v-if="listData && listData.length === 0"></image>
			</view>
			<!-- 车型-->
			<block>
				<view class="car-type">
					<view class="car-type-title c333">车型</view>
					<view class="car-btns">
						<scroll-view scroll-x>
							<view class="type-btn f24 c333 " :class="[btnIndex == index ? 'active' : '']" v-for="(item, index) in carType" @click="selectType(index)" :key="index">
								{{ item }}
							</view>
						</scroll-view>
					</view>
				</view>
				<!-- list -->
				<view class="list-main" v-if="listData.length > 0">
					<view v-for="(item, index) in listData" :key="index">
						<view class="list-title f24 c333">{{ item.title }}</view>
						<!--  循环 -->
						<view class="carlist">
							<view class="list-car-detail" v-for="(listItem, listIndex) in item.child" :key="listIndex">
								<view @click="toSingle(listItem.id)" class="item">
									<view class="car-title-list">
										<view class="f30 bold words">
											<text v-if="listItem.displacement" class="car-title-list__displacement">{{ listItem.displacement }}</text>
											{{ listItem.name }}
										</view>
										<view class="f30 ce41 pd30">
											<text class="iconfontPT  iconjiangjia icon-price cfc8" style="font-size: 26rpx;margin-right: 16rpx;"></text>
											<text class="cfc8">{{ listItem.special_price }}万</text>
										</view>
									</view>
									<view class="car-des-list f24 nt20">
										<view></view>
										<view class="">厂商指导价：{{ listItem.fac_price }}万</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-else><noData texts="该区域暂无在售车辆"></noData></view>
			</block>
		</view>
	</view>
</template>

<script>
import { vehicle, vehicleFilter } from '../../../../apis/new-car/index.js';
import noData from '../../../components/public/no-data.vue';
export default {
	data() {
		return {
			bannerList: [], //banner图片
			title: [], //车系简介
			carType: [],
			btnIndex: '*',
			vid: '',
			listData: [],
			showlist: false,
			city: '',
			params: {
				city: ''
			}
		};
	},
	computed: {
		host() {
			return this.$baseHost.qiniuHost;
		}
	},
	watch: {
		city(n, o) {
			console.log('watch', n, o);
			let that = this;
			clearTimeout(that.timeout);
			that.timeout = setTimeout(() => {
				that.getvehicle(that.params);
			}, 1);
		}
	},
	onLoad(option) {
		let that = this;
		that.params.city = option.city;
		uni.showToast({
			title: '加载中',
			icon: 'loading',
			duration: 10000000,
			mask: true
		});

		uni.getStorage({
			key: 'location',
			success(e) {
				that.city = e.data.city || '成都';
				that.params.city = e.data.city || '成都';
				that.params.vid = option.v_id || 3304;
				// that.getvehicle(that.params)
			},
			fail() {
				that.city = '成都';
				that.params.city = '成都';
			}
		});

		// that.choosecity(that.params)
	},
	onShow() {
		let that = this;
		uni.getStorage({
			key: 'position',
			success(e) {
				that.city = e.data;
				that.params.city = e.data || '成都';
				
				// that.getvehicle(that.params);
			}
		});
	},
	methods: {
		/*车系*/
		getvehicle: function(params) {
			let _self = this;
			let list = [];
			vehicle(params)
				.then(res => {
					_self.title = res.data.vehicle;
					_self.carType = res.data.car_types;
					let data = res.data.car_list;
					for (let i in data) {
						list.push({
							title: i,
							child: data[i]
						});
					}
					_self.listData = list;
					let type = JSON.parse(JSON.stringify(_self.title));
					uni.hideToast();
					_self.showlist = true;
				})
				.catch(err => {
					console.log(err);
					uni.hideToast();
				});
		},

		tocity() {
			uni.navigateTo({
				url: `../../component/city-model/city?type=2&vehicle_id=${this.title.id}`
			});
		},

		/**单个车型明细*/
		toSingle(id) {
			uni.navigateTo({
				url: '../carSingle/carSingle?cid=' + id + '&vid=' + this.vid + '&yum'
			});
		},
		/**
		 * 去获取底价*/
		toask(type, id, sid) {
			let _self = this;
			if (type == 0) {
				// 详细车型
				uni.navigateTo({
					url: '../../list/base/base?type=car&cid=' + id + '&sid=' + sid + '&vid=' + _self.vid
				});
			} else {
				// 车系
				uni.navigateTo({
					url: '../../list/base/base?type=shop&vid=' + _self.vid
				});
			}
		},
		/**选择车型 */
		selectType(index) {
			let _self = this,
				list = [];
			_self.btnIndex = index;
			_self.params.search = index;
			vehicleFilter(_self.params)
				.then(res => {
					let data = res.data || [];
					// _self.listData = {}
					for (let i in data) {
						list.push({
							title: i,
							child: data[i]
						});
					}
					_self.listData = list;
					_self.$forceUpdate();
				})
				.catch(err => {
					console.log(err);
				});
		}
	}
};
</script>

<style lang="less" scoped>
.detail-main {
	width: 100%;
	overflow-x: hidden;

	.banner {
		width: 100%;
		height: 446rpx;
		text-align: center;
		position: relative;
	}

	.iconzanwushuju1 {
		font-size: 40px;
		margin-bottom: 10px;
	}
	.noColor {
		color: #999999;
	}
	.banner swiper,
	.banner image {
		width: 100%;
		height: 100%;
	}

	.city {
		position: absolute;
		text-align: center;
		right: 30rpx;
		bottom: 20rpx;

		.position {
			&-txt {
				display: block;
				padding: 10rpx 16rpx;
				background: rgba(0, 0, 0, 0.4);
				color: #fff;
				font-size: 24rpx;
				border-radius: 10rpx;
			}
		}
	}

	.car-des {
		width: 100%;
		position: absolute;
		top: 435rpx;
		height: 170rpx;
		padding: 10rpx 0;
		// box-shadow: 0rpx 5rpx 15rpx 3rpx rgba(153, 153, 153, 0.15);
		background: #fff;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		align-items: center;
		z-index: 45;
		display: flex;
		overflow: hidden;

		.position-img {
			height: 120rpx;
			width: 90rpx;
			position: absolute;
			right: 20rpx;
			top: 6rpx;
		}
	}

	.car-title {
		margin-left: 30rpx;
	}

	.f48 {
		font-size: 48rpx;
	}

	.f24 {
		font-size: 24rpx;
	}

	.f34 {
		font-size: 34rpx;
	}

	.ce41 {
		color: #e41805;
	}

	.c999 {
		color: #999;
	}

	.ml18 {
		margin-left: 18rpx;
	}

	.mt38 {
		margin-top: 28rpx;
		height: 46rpx;
		line-height: 46rpx;
	}

	.mt28 {
		margin-top: 28rpx;
	}

	.set {
		margin: 0 30rpx 0 auto;
		text-align: center;
		width: 100rpx;
		height: 120rpx;
		border: 2rpx solid rgba(38, 111, 210, 1);
		border-radius: 10rpx;
		color: #266fd2;
	}

	.iconpeizhi {
		font-size: 48rpx;
		display: block;
		margin: 10rpx 0;
	}

	.f18 {
		font-size: 18rpx;
	}

	/* 车型 */
	.car-type {
		width: 100%;
		margin-top: 180rpx;
		border-top: 20rpx solid #f8f8f8;
		padding-left: 30rpx;
	}

	.c333 {
		color: #333;
	}

	.car-type-title {
		line-height: 34rpx;
		font-size: 34rpx;
		font-weight: bold;
		margin-top: 30rpx;
	}

	.car-btns {
		white-space: nowrap;
	}

	.type-btn {
		display: inline-block;
		padding: 10rpx 30rpx;
		background: #f8f8f8;
		line-height: 24rpx;
		margin: 20rpx 10rpx 0 0;
		border-radius: 5rpx;
	}

	.type-btn.active {
		color: #e41805;
		background: #ffe9e7;
	}

	/* list */
	.list-main {
		width: 100%;
		height: 100%;
		margin-top: 30rpx;
		// margin-bottom: 110rpx;
	}

	.list-title {
		padding: 10rpx 30rpx;
		background: #f8f8f8;
		font-weight: bold;
	}

	.list-type-title {
		height: 40rpx;
		line-height: 40rpx;
		background: #f8f8f8;
		font-size: 20rpx;
		padding-left: 30rpx;
		color: #999;
	}

	.list-car-detail {
		padding: 0 30rpx;
	}

	.list-c-d-t {
		display: flex;
		margin-top: 30rpx;
	}

	.words {
		word-break: break-all;
		width: 76%;
	}

	.f30 {
		font-size: 30rpx;
	}

	.fw {
		font-weight: bold;
	}

	.fr {
		margin-left: auto;
	}

	.list-two {
		display: flex;
		margin-top: 40rpx;
	}

	.cfc8 {
		color: #fc830c;
	}

	.icon-price {
		width: 14rpx;
		height: 18rpx;
		font-size: 18rpx;
		display: inline-block;
		margin: 0 10rpx 0 30rpx;
	}

	.list-th {
		display: flex;
		justify-items: center;
		align-items: center;
		margin: 40rpx 0 24rpx;
	}

	.count {
		display: flex;
		height: 64rpx;
		align-items: center;
	}

	.icon-count {
		width: 28rpx;
		height: 30rpx;
		display: inline-block;
		font-size: 30rpx;
		margin-right: 15rpx;
	}

	.list-btn {
		margin: 0 0 0 30rpx;
		flex: 1;
		height: 64rpx;
		text-align: center;
		line-height: 64rpx;
		border: 2rpx solid rgba(252, 131, 12, 1);
		border-radius: 10rpx;
	}

	.car-li {
		display: flex;
		// height: 120rpx;
		padding: 10rpx 0;
		margin: 0 50rpx;
		flex-wrap: wrap;
	}

	.carlist {
		padding-bottom: 30rpx;
	}

	.list-car-detail .item {
		margin-top: 30rpx;
		padding: 30rpx;
		box-shadow: 0rpx 4rpx 15rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 10rpx;
	}
	.carlist .list-car-detail:last-child {
		.item {
			border: none;
		}
	}
	.car-title-list,
	.car-des-list {
		// height: 30rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.car-title-list {
		padding: 20rpx 0rpx 8rpx;
		
		&__displacement {
			margin-right: 10rpx;
		}
	}

	.car-des-list {
		padding: 6rpx 0 16rpx;
	}

	.flex2 {
		flex: 2;
		line-height: 36rpx !important;
	}

	.ml30 {
		margin-left: 30rpx;
	}
}
</style>
